<template>
    <div>
        <head-nav></head-nav>
        <div class="center3">
            <el-tabs type="border-card" v-model="activeName1" @tab-click="handleClick">
                <el-tab-pane name="first" label="景点简介">
                    <div class="cent-1">
                        <img :src="watchList[idx1].imgSrc" width="710" height="360"/>
                        <div class="cent-1-1">
                            <div>{{watchList[idx1].title1}}</div>
                            <div>{{watchList[idx1].title2}}</div>
                            <div>位置:{{watchList[idx1].address1}}</div>
                            <div @click="goMap">查看地图</div>
                        </div>
                    </div>
                    <div class="cent-2">
                        <div>园区公告：</div>
                        <div>
                            疫情防控须知 <br>
                            入馆须佩戴口罩，扫青岛一码通（绿码），查看核酸检测信息，持有72小时内核酸检测信息方可进馆；如亮黄码：省外游客需要在当地做核酸，并提供48小时内核酸检测阴性报告，方可入馆。感谢您的理解与配合！
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="second" label="特色看点">
                    <h3>{{watchList[idx1].title1}}</h3>
                    <div class="pwjwh">
                        <span class="el-icon-s-opportunity">{{watchList[idx1].title3}}</span>
                        <div class="text">{{watchList[idx1].text1}}</div>
                    </div>
                    <div class="mxp">
                        <img :src="watchList[idx1].imgSrc2" width="790"/>
                        <div class="mxpnr">
                            <div>{{watchList[idx1].title4}}</div>
                            <div>{{watchList[idx1].text2}}</div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="third" label="交通位置">
                    <h3>{{watchList[idx1].title1}}地理位置</h3>
                    <div class="baidu-map">
                        <div id="container">
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="fourth" label="用户评价">
                    <div class="yhpj">
                        <h3>用户评价</h3>
                        <img :src="watchList[idx1].imgSrc3" height="390" width="990"/>
                        <div class="pwjwh1">
                            <el-rate
                                    v-model="value"
                                    disabled
                                    show-score
                                    text-color="#ff9900">
                            </el-rate>
                            <span>{{watchList[idx1].pj}}条评论</span>
                            <div @click="ckpl">查看评论</div>
                            <div @click="wypl">我要评论</div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <foot-nav></foot-nav>
    </div>
</template>

<script>
    import HeadNav from "@/components/HeadNav";
    import FootNav from "@/components/FootNav";
    export default {
        name: "WatchView",
        components: {FootNav, HeadNav},
        data(){
            return{
                activeName1: 'first',
                value2: null,
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                texts:['极差','失望','一般','满意','惊喜'],
                value:4.8,
                idx1:'',
                watchList:[
                    {
                        imgSrc:require('../../assets/qd/qd01.jpg'),
                        title1:'八水河',
                        title2:'',
                        address:'[山东·青岛·崂山区]',
                        address1:'青岛市崂山区梅岭路29号崂山太清景区内',
                        title3:'品味酒文化',
                        text1:'博物馆设立在青岛啤酒百年前的老厂房、老设备之内，以青岛啤酒的百年历程及工艺流程为主线，浓缩了中国啤酒工业及青岛啤酒的发展史，集文化历史、生产工艺流程、啤酒娱乐、购物、餐饮为一体，具备了旅游的知识性、娱乐性、参与性等特点，体现了世界视野、民族特色、穿透历史、融汇生活的文化理念。',
                        title4:'青岛明信片',
                        text2:'青岛啤酒博物馆设在百年前的青岛啤酒厂老厂房内，一幢幢红色的洋房很有味道，靠马路的一幢房子屋顶上，装饰着一排排超大啤酒罐，格外醒目。',
                        imgSrc2:require('../../assets/img/103.jpg'),
                        imgSrc3:require('../../assets/img/104.jpg'),
                        pj:25666
                    },
                    {
                        imgSrc:require('../../assets/qd/qd02.jpg'),
                        title1:'翠林云庄乡村乐园',
                        title2:'',
                        address:'[山东·青岛·城阳]',
                        address1:'青岛市城阳区棘洪滩街道东毛家庄社区'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd03.jpg'),
                        title1:'大珠山风景区',
                        title2:'4A景区',
                        address:'[山东·青岛·胶南区]',
                        address1:'青岛胶南滨海街道办事处大珠山景区'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd04.jpg'),
                        title1:'海风滑翔基地',
                        title2:'',
                        address:'[山东·青岛·即墨区]',
                        address1:'青岛市即墨区鹤山东路港中旅西侧四舍山'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd05.jpg'),
                        title1:'鹤山',
                        title2:'',
                        address:'[山东·青岛·即墨区]',
                        address1:'青岛即墨市鳌山卫镇南4公里（近双星度假村西侧）'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd06.jpg'),
                        title1:'海信科学探索中心',
                        title2:'',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市南区江西路11号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd07.jpg'),
                        title1:'崂山',
                        title2:'5A景区',
                        address:'[山东·青岛·崂山区]',
                        address1:'青岛市崂山区崂山风景区'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd08.jpg'),
                        title1:'崂山巨峰游览区',
                        title2:'',
                        address:'[山东·青岛·崂山区]',
                        address1:'青岛市崂山区崂山风景区内'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd09.jpg'),
                        title1:'崂山九水游览区',
                        title2:'',
                        address:'[山东·青岛·崂山区]',
                        address1:'青岛市崂山风景区九水游览区'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd10.jpg'),
                        title1:'崂山仰口游览区',
                        title2:'',
                        address:'[山东·青岛·崂山区]',
                        address1:'青岛市崂山区王哥庄街道仰口风景区'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd11.jpg'),
                        title1:'琅琊台风景区',
                        title2:'4A景区',
                        address:'[山东·青岛·胶南区]',
                        address1:'青岛市黄岛区（原胶南市）西南海滨青岛琅琊台省级旅游度假区内'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd12.jpg'),
                        title1:'青岛茶山景区',
                        title2:'4A景区',
                        address:'[山东·青岛·平度]',
                        address1:'青岛市平度市店子镇'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd13.jpg'),
                        title1:'德国总督楼旧址博物馆',
                        title2:'',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市市南区龙山路26号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd14.jpg'),
                        title1:'青岛动物园',
                        title2:'',
                        address:'[山东·青岛·市北区]',
                        address1:'青岛市市南区延安一路102号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd15.png'),
                        title1:'青岛方特梦幻王国',
                        title2:'4A景区',
                        address:'[山东·青岛·城阳区]',
                        address1:'青岛市城阳区红岛街道岙东南路'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd16.jpg'),
                        title1:'青岛海昌极地海洋公园',
                        title2:'4A景区',
                        address:'[山东·青岛·崂山区]',
                        address1:'青岛市东海东路60号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd17.jpg'),
                        title1:'青岛海底世界',
                        title2:'4A景区',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市市南区莱阳路2号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd18.jpg'),
                        title1:'青岛海上观光',
                        title2:'',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市市南区西陵峡路9号青岛友谊国际游艇俱乐部'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd19.jpg'),
                        title1:'青岛啤酒博物馆',
                        title2:'4A景区',
                        address:'[山东·青岛·市北区]',
                        address1:'青岛市市北区登州路56号青岛啤酒博物馆'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd20.png'),
                        title1:'青岛葡萄酒博物馆',
                        title2:'4A景区',
                        address:'[山东·青岛·市北区]',
                        address1:'青岛市市北区延安一路68号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd21.jpg'),
                        title1:'青岛青峰毛公山',
                        title2:'',
                        address:'[山东·青岛·城阳区]',
                        address1:'青岛市城阳区惜福镇街道青峰社区'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd22.jpg'),
                        title1:'青岛世博园',
                        title2:'4A景区',
                        address:'[山东·青岛·百果山都市休闲风景区]',
                        address1:'青岛市李沧区世园大道（长水路）'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd23.jpg'),
                        title1:'青岛森林野生动物世界',
                        title2:'4A景区',
                        address:'[山东·青岛·黄岛区]',
                        address1:'青岛市黄岛区珠山风景区（灵珠山）'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd24.jpg'),
                        title1:'青岛天主教堂',
                        title2:'',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市市南区浙江路15号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd25.jpg'),
                        title1:'青岛西海岸生态观光园',
                        title2:'',
                        address:'[山东·青岛·黄岛区]',
                        address1:'青岛市黄岛区灵山湾影视文化产业区西侧胶州湾东路3666号'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd26.jpg'),
                        title1:'信号山公园',
                        title2:'3A景区',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市市南区齐东路17号、龙口路16号甲'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd27.jpg'),
                        title1:'羊毛沟花海湿地',
                        title2:'',
                        address:'[山东·青岛·城阳区]',
                        address1:'青岛市城阳区春阳路与正源路交叉口西侧20米'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd28.jpg'),
                        title1:'中国水准零点景区',
                        title2:'',
                        address:'[山东·青岛·市南区]',
                        address1:'青岛市市南区东海中路30号银海大世界内'
                    },
                    {
                        imgSrc:require('../../assets/qd/qd29.jpg'),
                        title1:'珠山国家森林公园',
                        title2:'4A景区',
                        address:'[山东·青岛·黄岛区]',
                        address1:'青岛市经济开发区灵珠山街道木厂口村'
                    },

                ]
            }
        },
        created(){
            this.idx1=this.$route.params.id
        },
        mounted(){
            this.mapdata()
            let name = sessionStorage.getItem('currentTab')
            if(name){
                this.activeName1 = name
            }
        },
        beforeRouteLeave(to, from, next){
            sessionStorage.removeItem('currentTab')
            next()
        },

        methods: {
            handleClick(tab, event) {
                sessionStorage.setItem('currentTab', tab.name)
            },
            goMap(){
                this.activeName1='third'
            },
            ckpl(){
                this.$router.push({path:'/ckpl'})
            },
            wypl(){
                this.$router.push({path:'/wypl'})
            },
            mapdata(){
                var map = new BMap.Map("container");
                var point = new BMap.Point(116.404, 39.915);
                map.centerAndZoom(point, 12);
                map.enableScrollWheelZoom(true);
                //添加缩略图控件
                map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
                //添加缩放平移控件
                map.addControl(new BMap.NavigationControl());
                //添加比例尺控件
                map.addControl(new BMap.ScaleControl());
                //添加地图类型控件
                //map.addControl(new BMap.MapTypeControl());

                //设置标注的图标
                var icon = new BMap.Icon(require("@/assets/img/xz.png"),new BMap.Size(100,100));
                //设置标注的经纬度
                var marker = new BMap.Marker(new BMap.Point(116.404,39.915),{icon:icon});
                //把标注添加到地图上
                map.addOverlay(marker);
                var content = "<table>";
                content = content + "<tr><td> 天安门</td></tr>";
                content = content + "<tr><td>坐落在中华人民共和国首都北京市的中心、故宫的南端</td></tr>";
                content = content + "<tr><td> 时间：2022-10-27</td></tr>";
                content += "</table>";
                var infowindow = new BMap.InfoWindow(content);
                marker.addEventListener("click",function(){
                    this.openInfoWindow(infowindow);
                });
            },
            },
    }
</script>

<style scoped>
    .center3{
        width: 1190px;
        margin: 0 auto 10px;
        text-align: center;
    }
    .cent-1{
        display: flex;
        margin: 15px;
    }
    .cent-1-1{
        text-align: left;
        margin-left: 50px;
        margin-top: 10px;
    }
    .cent-1-1 div:nth-of-type(1){
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .cent-1-1 div:nth-of-type(2){
        font-size: 15px;
        color: #e24d4d;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .cent-1-1 div:nth-of-type(3){
        font-size: 15px;
        color: black;
        margin-bottom: 30px;
    }
    .cent-1-1 div:nth-of-type(4){
        font-size: 15px;
        background: #18c0c8;
        height: 40px;
        width: 150px;
        text-align: center;
        color: white;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .cent-2{
        background: #fbecc8;
        display: flex;
        text-align: left;
        color: #df5900;
        height: 136px;
        padding: 0 30px;
    }
    .cent-2 div:nth-of-type(1){
        width: 130px;
        line-height: 44px;
        margin-right: 30px;
    }
    .cent-2 div:nth-of-type(2){
        line-height: 44px;
    }
    .pwjwh{
        text-align: left;
        border: 1px solid lightgray;
        padding: 25px;
        width: 940px;
        margin: 10px auto;
    }
    .pwjwh span{
        color: #00bcd4;
        margin-bottom: 20px;
    }
    .text{
        font-size: 13px;
        line-height: 25px;
    }
    .mxp{
        margin: 0 auto;
        display: flex;
        width: 990px;
    }
    .mxp img{
        flex: 1;
    }
    .mxpnr{
        width: 200px;
        margin-left: 10px;
        background: rgba(0,0,0,0.5);
        color: white;
    }
    .mxpnr div{
        text-align:  justify;
        line-height: 20px;
        margin: 10px;
    }
    #container{
        height: 450px;
    }
    .baidu-map{
        margin-top: 10px;
    }
    .yhpj img{
        margin-top: 10px;
    }
    /deep/.el-rate__icon {
    font-size: 40px;
    }
    /deep/.el-rate__text{
        font-size: 30px;
    }
    /deep/.el-rate{
        height: 40px;
    }
    .pwjwh1{
        text-align: left;
        border: 1px solid lightgray;
        padding: 25px;
        width: 940px;
        margin: 10px auto;
        display: flex;
    }
    .pwjwh1 span{
        color: #00bcd4;
        margin-top: 10px;
        margin-left: 30px;
    }
    .pwjwh1 div:nth-of-type(2){
        background: #00bcd4;
        color: white;
        height: 40px;
        width: 120px;
        line-height: 40px;
        text-align: center;
        margin-left: 270px;
    }
    .pwjwh1 div:nth-of-type(3){
        background: #00bcd4;
        color: white;
        height: 40px;
        width: 120px;
        line-height: 40px;
        text-align: center;
        margin-left: 30px;
    }
    /deep/ .el-tabs__item.is-active {
        color: rgb(28,175,197) !important;
    }
    /deep/ .el-tabs__item:hover {
        color: rgb(28,175,197) !important;
    }
    /deep/ .el-tabs__active-bar.is-top {
        background: rgb(28,175,197) !important;
    }


</style>